<template>
  <div class="box">
    <van-dialog v-model="shareShow" class="shareshow">
      <div class="fuzhi" v-if="shareShow" @click="copyLink"></div>
      <div
        id="share"
        style="width: 360px; height: 145vw; background-color: #1f202a"
      >
        <img
          @click="shareShow = false"
          class="shareclose"
          src="../../../assets/images/shareclose.png"
          alt=""
        />
        <img class="sharerocket" :src="upOrDownImg" alt="" />
        <div class="sharecontent1">
          <p>{{ $t("long.fenxiangshijian") }} {{ getFormatDate() }}</p>
        </div>
        <div class="oof">{{ randTextValue }}</div>
        <div class="sharecontent">
          <p class="sharectp1">
            {{ detail.symbolName }}{{ $t("common.yongxuheyue") }}
          </p>
          <div class="sharectd1">
            <div
              :style="{
                backgroundColor:
                  detail.side == '多' ? '#00A77F' : 'rgb(228, 83, 96)',
              }"
            >
              {{ detail.side == "多" ? $t("long.duo") : $t("long.kong") }}
            </div>
            <p>{{ detail.multiple }}X</p>
          </div>
          <p class="sharectp2">
            {{ $t("common.shouyilv") }} ({{ $t("long.chicangzhong") }})
          </p>
          <div class="sharectd2">
            <p :class="+detail.positionProfitRate > 0 ? 'green' : 'red'">
              {{
                +detail.positionProfitRate > 0
                  ? "+" + detail.positionProfitRate
                  : detail.positionProfitRate
              }}%
            </p>
            <img
              class="updown"
              :src="
                +detail.positionProfitRate > 0
                  ? require('../../../assets/images/up.png')
                  : require('../../../assets/images/down.png')
              "
              alt=""
            />
          </div>
          <div class="sharectd3">
            <div>
              <p>{{ $t("long.kaicangjunjia") }}</p>
              <p>{{ $formatMoney(detail.openAvgPrice, 2) }}</p>
            </div>
            <div>
              <p>{{ $t("long.zuixinjiage") }}</p>
              <p>{{ $formatMoney(detail.markPrice, 2) }}</p>
            </div>
          </div>
        </div>
        <div class="sharebottom">
          <img class="sharema" :src="qrcodeImg" />
          <div class="shareright">
            <p>{{ $t("common.saomatiyan") }}</p>
            <p>
              {{ $t("common.yaoqingma") }}
              <span>{{ getUserInfo.inviteCode || "" }}</span>
              <img src="../../../assets/images/xq2.png" class="fuzhiimg" />
            </p>
          </div>
        </div>
      </div>
      <img
        :src="picUrl"
        class="picurl"
        alt=""
        :style="{ width: picurla ? '360px' : 0 }"
      />
    </van-dialog>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import QRCode from "qrcode";
export default {
  data() {
    return {
      detail: {},
      picurla: false,
      qrcodeImg: "",
      shareShow: false,
      picUrl: "",
      getUserInfo: {},
    };
  },
  created() {},
  computed: {
    randTextValue() {
      let index = (Math.random() * 4 + 1) | 0;
      let uparr = [
        "让你自由让你high，带你装B带你飞",
        "挥金如土",
        "我是土豪我怕谁",
        "跟我一起做土豪",
        "人生得意须尽欢",
      ];
      let downarr = [
        "廋死的骆驼比马大",
        "大不了从头再来",
        "我离成功更进一步",
        "虎落平阳",
        "蛟龙失水",
      ];
      return +this.detail.positionProfitRate > 0
        ? uparr[index]
        : downarr[index];
    },
    upOrDownImg() {
      let index = (Math.random() * 4 + 1) | 0;
      if (+this.detail.positionProfitRate > 0) {
        return require("../../../assets/images/up" + index + ".png");
      } else {
        return require("../../../assets/images/down" + index + ".png");
      }
    },
  },
  methods: {
    copyLink() {
      let val = `https://www.rippleexchange.com/index?inviteCode=${this.getUserInfo.inviteCode}`;
      console.log(val)
      if (!val) {
        return;
      }
      this.$copyText(val).then(
        () => {
          this.$toast(this.$t("common.fuzhiyaoqing"));
        },
        () => {
          this.$toast(this.$t("common.fuzhishi"));
        }
      );
    },
    createQRCode() {
      QRCode.toDataURL(
        `https://www.rippleexchange.com/index?inviteCode=${this.getUserInfo.inviteCode}`,
        {
          //这个this.url就是你扫码后要跳转的地址
          version: 7, //版本号
          errorCorrectionLevel: "Q", //容错率,(建议选较低)更高的级别可以识别更模糊的二维码，但会降低二维码的容量
          width: 280, //设置二维码图片大小
          height: 280,
        }
      )
        .then((url) => {
          // console.log(url); //这个url是二维码生成地址，也就是相当于图片地址
          this.qrcodeImg = url; //赋值给变量。用在img的src属性上
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getFormatDate() {
      var date = new Date();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var hour = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      hour = hour < 10 ? "0" + hour : hour;
      minutes = minutes < 10 ? "0" + minutes : minutes;
      seconds = seconds < 10 ? "0" + seconds : seconds;
      var currentDate =
        date.getFullYear() +
        "/" +
        month +
        "/" +
        day +
        " " +
        hour +
        ":" +
        minutes +
        ":" +
        seconds;
      return currentDate;
    },
    showShare(detail, userInfo) {
      this.picurla = false;
      this.shareShow = true;
      this.detail = detail;
      this.getUserInfo = userInfo;
      console.log(detail, userInfo);
      this.createQRCode();
      this.$nextTick(function () {
        let htmlDom = document.getElementById("share"); // 你要截图的元素  可直接是img
        var FileSaver = require("file-saver");
        setTimeout(() => {
          this.$nextTick(function () {
            html2canvas(htmlDom, {
              // scale: 1,
              x: htmlDom.offsetLeft, //传入x和y长度，拒绝空白图片
              y: htmlDom.offsetTop,
              allowTaint: false, //允许污染
              taintTest: true, //在渲染前测试图片
              useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用)
              background: "#000",
              scale: 2, // 处理模糊问题
              dpi: 300, // 处理模糊问题
            }).then((canvas) => {
              // 新增代码 返回图片的URL,设置为png格式
              var dataUrl = canvas.toDataURL("image/png");
              this.picUrl = dataUrl;
              this.picurla = true;
            });
          });
        }, 100);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.shareshow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 93vw !important;
  height: 142vw !important;
  background-color: rgb(31, 32, 42) !important;
  overflow: hidden;
  z-index: 2003 !important;

  :deep(.van-dialog__footer) {
    display: none;
  }

  .button {
    width: 74.4vw;
    height: 9.6vw;
    border-radius: 1.33vw;
    position: absolute;
    bottom: 12.8vw;
    left: 10vw;
  }

  img {
    margin: 0;
  }

  .shareclose {
    width: 4.8vw;
    position: absolute;
    top: 4.2vw;
    right: 4.2vw;
    z-index: 1;
  }

  .sharerocket {
    width: 40vw;
    position: absolute;
    top: 6vw;
    right: 0vw;
  }

  .sharecontent1 {
    position: absolute;
    top: 4.8vw;
    left: 4.2vw;
    text-align: left;

    img {
      width: 19.73vw;
      height: 6.93vw;
    }

    p {
      position: relative;
      top: 3.2vw;
      color: rgba(214, 214, 214, 100);
      font-size: 3.2vw;
      letter-spacing: 0.1vw;
    }
  }

  .sharecontent {
    position: absolute;
    top: 44.2vw;
    left: 4.2vw;
    text-align: left;

    .sharectp1 {
      font-size: 4.8vw;
      font-weight: 600;
      margin-bottom: 6.4vw;
    }

    .sharectd1 {
      display: flex;
      align-items: center;
      margin-bottom: 11vw;

      div {
        width: 4.2vw;
        height: 4.2vw;
        line-height: 4.2vw;
        text-align: center;
        background-color: #5eba89;
        border-radius: 2px;
        font-size: 3.2vw;
        margin-right: 4.3vw;
      }

      p {
        font-size: 3.73vw;
        color: rgba(214, 214, 214, 100);
        padding-left: 4.3vw;
        border-left: 0.2vw solid #8992AE;
      }
    }

    .sharectp2 {
      font-size: 3.2vw;
      color: rgba(214, 214, 214, 100);
      margin-bottom: 2.1vw;
    }

    .sharectd2 {
      font-size: 11vw;
      display: flex;
      align-items: flex-start;
      margin-bottom: 10vw;

      span {
        position: relative;
      }

      .updown {
        width: 6.7vw;
        margin-left: 2.1vw;
        margin-top: 2.13vw;
      }
    }

    .red {
      color: #e45360;
      margin-top: 2.13vw;
    }

    .green {
      margin-top: 2.13vw;
      color: #5eba89;
    }

    .sharectd3 {
      display: flex;

      > div {
        margin-right: 8.5vw;

        p {
          margin-bottom: 2.1vw;
          font-weight: 600;
        }
      }
    }
  }

  .picurl {
    position: absolute;
    left: 0;
    top: 0;
    width: 92vw;
    height: 145vw;
    background-color: #000;
  }

  .sharebottom {
    position: absolute;
    bottom: 20px;
    width: 100%;
    height: 75px;
    // background-color: #1f202a;
    display: flex;
    align-items: center;

    .sharema {
      width: 56px;
      height: 56px;
      background-color: #fff;
      margin: 16px;
    }

    .shareright {
      p {
        text-align: left;
        font-weight: 600;
      }

      p:first-child {
        margin-bottom: 10px;
      }

      span {
        color: #0a7aff;
      }
    }
  }
}
.oof {
  width: 60vw;
  font-weight: 600;
  font-size: 5vw;
  color: #fff;
  position: absolute;
  left: 4vw;
  top: 28vw;
  text-align: left;
}
.fuzhi {
  position: fixed;
  bottom: 6vw;
  left: 20vw;
  width: 200px;
  height: 40px;
  // border: 1px solid red;
  z-index: 2003;
}
.fuzhiimg{
  width:4.2vw;
  position: relative;
  left:1vw;
  top:0.5vw;
}
</style>
